<template>
  <div class="product-container">
    <div class="my-header">
      <i></i>
      <strong>商品列表</strong>
      <i></i>
    </div>
    <!-- 商品列表 -->
    <div class="content">
      <div class="loadmore-warp" id="loadmore">
        <div class="tips" v-if="activity.notice!==''">
          <div class="icon"></div>
          <div style="padding-left:30px;line-height:20px;" v-html="activity.notice"></div>
        </div>
        <div v-if="time!=''" class="countdown">距离结束仅剩:<span class="time" v-html="time"></span></div>
        <div class="recommend" v-if="activity.activityId==preSaleId">
          <!--<div class="countdown">距离结束仅剩:<span class="time" v-html="time"></span></div>-->
          <div v-for="(item,index) in recommend" :key="index" class="recommed-item" :style="imgWidth(item.class)">
            <img @click="recommendRouter(item.goodId)" v-lazy="'http://img.sportjx.com/img/recommend1/recommend_'+item.id+'.png'" alt="">
          </div>
          <div class="clear"></div>
        </div>
        <mt-loadmore  :bottom-distance="30" @bottom-status-change="handleBottomChange" :top-method="loadTop"
          :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="product-list">
            <li v-if="activity.bannerImg1" style="margin-right:-10px"><img style="width:100%;" v-lazy="activity.bannerImg1" alt=""></li>
            <li :class="{'product-item':!item.banner}" v-for="(item,index) in proData" :key="index">
              <div v-if="item.banner" style="margin-right:-10px;padding:20px 0"><img style="width:100%;" v-lazy="activity.bannerImg2" alt=""></div>
              <div v-else @click="goDetail( item.productId )">
                <div class="item-posre">
                  <img v-lazy="item.activityImg" alt="">
                </div>
                <div class="item-product-text">{{item.sellingPoints}}</div>
                <p class="original-price">吊牌价：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
                <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                  <button type="button" class="jx-btn" v-if="item.stockNum>0">立即购买</button>
                  <button type="button" class="jx-btn none" v-else>已售罄 </button>
                </p>
              </div>
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
            </li>
          </ul>
          <div class="loadmoreText" slot="bottom" v-show="proData!=''">
            <span v-if="bottomStatus !== 'drop'">{{bottomText}}</span>
            <span v-else>释放更新</span>
          </div>
          <div class="empty-info cart-tips" v-if="proData == '' && isDone">
            <p>活动已经下架了哦</p>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <ServiceIcon></ServiceIcon>
    <!-- 商品列表 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="shop">
        <div @click="$router.go(0)">
          <div class="iconfont icon-dianpu"></div><span>商品</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="cart">
        <div @click="$router.push('/cart')">
          <div class="iconfont icon-cart"></div><span>购物车</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="home">
        <div @click="$router.push({name:'order',query:{tab:0}})">
          <div class="iconfont icon-dingdan"></div><span>订单</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
    <BackHead></BackHead>
  </div>
</template>

<script>
  import ServiceIcon from '@/components/common/serviceIcon'
  import BackHead from '@/components/common/backHead'
  import wxShare from '@/mixins/wechat'
  import {
    getProductList
  } from '@/api/shop'

  import {
    decryptString,
    setLocalStorage,
    encryptString,
    getLocalStorage
  } from '@/utils'
  export default {
    data() {
      return {
        time: '',
        /* 对我可见的id */
        // testBid: 'c5677c2269004e1eb80d43844b59a5ad',
        // testBid: 'ed2044756e4d4306a1587c4bf9a36a2e',
        /* 活动id*/
        //  preSaleId: '4c6c1dfbfe534a888c0fa2d420d2a7af',
        /* 活动id*/
        preSaleId: 'c5f490c497ca43b3beb3dd9fea19ce40',
        recommend: [{
          id: '01'
        }, {
          id: '02'
        }, {
          id: '03'
        }, {
          id: '04'
        }, {
          id: '05'
        }, {
          id: '06',
          goodCode: 'KNWI15034CD061800',
          goodId: '1b6441b8ad4c4f9d96c8997ed1c9f1f5'
        }, {
          id: '07',
          goodCode: 'KNWI15034CD044440',
          goodId: 'cbad4857f3914d04838f6f8d970900df'
        }, {
          id: '08',
          goodCode: 'KNWH38034CE046999',
          goodId: '18b844517b42406e83705d1c733bb6dd'
        }, {
          id: '09',
          goodCode: 'KNWH38034CE044999',
          goodId: '5e1d51eb217645efa39277a76e309c17'
        }, {
          id: 10,
          goodCode: 'KNMH23034CD052999',
          goodId: '649f7d77af8e43e4840885f6e137101c'
        }, {
          id: 11,
          goodCode: 'KNMI28034CC219605',
          goodId: '8d9e8d9823364080bfd1aec82ebe4376'
        }, {
          id: 12,
          goodCode: 'KNWH32255W1007999',
          goodId: '9559162a89af4862954a8854229f2439'

        }, {
          id: 13,
          goodCode: 'KNWH32255W2003129',
          goodId: '60e1d13d807b471a9921e28a695f3b84'
        }, {
          id: 14,
          goodCode: 'KNWI23285W3017400',
          goodId: 'a1d8191c8b704965bf62f49eae95bfa0'
        }, {
          id: 15
        }],
        bottomStatus: '',
        bottomText: '上拉加载更多',
        selected: 'shop',
        proData: [],
        params: {
          pageIndex: 1,
          pageSize: 20
        },
        isDone: false,
        tips: false,
        activity: {
          notice: ''
        },
        showText: false,
        allLoaded: false
      }
    },
    components: {
      ServiceIcon,
      BackHead
    },
    computed: {

    },
    mixins: [wxShare],
    created() {

    },
    methods: {
      imgWidth(width) {
        if (width === undefined) {
          return 'width:100%'
        } else {
          return 'width:' + width + '%'
        }
      },
      countDown(intDiff) {
        const _this = this
        window.setInterval(() => {
          let day = 0
          let hour = 0
          let minute = 0
          let second = 0
          if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24))
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24)
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60)
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
          }
          if (minute <= 9) minute = '0' + minute
          if (second <= 9) second = '0' + second
          _this.time = day +
            '<span style="color:#ffffff;font-size:14px;padding:0 3px;position:relative;bottom:2px">天</span>' +
            hour +
            '<span style="color:#ffffff;font-size:14px;padding:0 3px;position:relative;bottom:2px">小时</span>' +
            minute +
            '<span style="color:#ffffff;font-size:14px;padding:0 3px;position:relative;bottom:2px">分</span>' +
            second +
            '<span style="color:#ffffff;font-size:14px;padding:0 3px;position:relative;bottom:2px;">秒</span>'
          intDiff--
        }, 1000)
      },
      recommendRouter(id) {
        if (id === undefined) return
        const data = {
          goodsId: id,
          activityId: this.params.activityId,
          bid: this.params.bid
        }
        const encryptStr = encryptString(JSON.stringify(data))
        const productId = encryptStr.replace(/\+/g, '-')
        this.$router.push({
          path: '/product',
          query: {
            id: productId
          }
        })
      },
      goDetail(productId) {
        // if (this.testBid !== this.params.bid && this.preSaleId === this.params.activityId) return
        this.$router.push({
          path: '/product',
          query: {
            id: productId
          }
        })
      },
      handleBottomChange(status) {
        this.bottomStatus = status
      },
      // 设置分享信息
      setShare(info) {
        const shareInfo = {
          title: info.labelName,
          desc: info.activeDoc,
          link: window.location.href,
          img: info.labelLogo
        }
        // mixins
        this.wechatShare(shareInfo)
      },
      loadBottom() {
        // 底部加载更多
        this.$refs.loadmore.onBottomLoaded()
        this.bottomText = ''
        this.fetchData()
      },
      loadTop() {
        // 下拉刷新
        this.loadDone = false
        this.proData = []
        this.$refs.loadmore.onTopLoaded()
        this.params.pageIndex = 1
        this.fetchData()
      },
      fetchData(first) {
        // for (let i = 0; i < 60; i++) {
        //   this.recommend.push({
        //     id: i + 1
        //   })
        // }
        // console.log(JSON.stringify(this.recommend))
        const params = {
          pageIndex: this.params.pageIndex,
          pageSize: this.params.pageSize,
          activityId: this.params.activityId
        }
        getProductList(params).then(res => {
          this.activity = res.data.activity
          const list = res.data.findGoodsList
          // 如果有新品和旧款分类插入banner
          list.forEach((item, index) => {
            // 先判断index>0 后判断index-1
            if (item.isNew === 0 && index > 0 && list[index - 1].isNew === 1) {
              list.splice(index, 0, {
                'banner': true
              })
            }
          })
          this.proData = this.proData.concat(list)
          this.allLoaded = !res.data.hasNext
          this.bottomText = this.allLoaded === true ? '没有更多了' : '上拉加载更多...'
          this.params.pageIndex += 1
          if (this.proData.length > 0) {
            this.proData.map(item => {
              // 如果没有插入banner图
              if (!item.banner) {
                const data = {
                  goodsId: item.goodsId,
                  activityId: item.activityId,
                  bid: this.params.bid
                }

                // 加密
                const encryptStr = encryptString(JSON.stringify(data))
                item.productId = encryptStr.replace(/\+/g, '-')
              }
            })
          } else {
            this.isDone = true
          }
          this.setShare(this.activity)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    activated() {
      // 修复keepalive tab不更新
      if (this.$route.name === 'shop') {
        this.selected = 'shop'
      }
    },

    mounted() {
      // this.tips = true
      this.ActiveNo = this.$route.query.id
      if (this.ActiveNo) {
        // 替换所有的'-'
        const decryptStringStr = this.ActiveNo.replace(/\-/g, '+')
        // 解密
        const parseStr = decryptString(decryptStringStr)
        const queryParams = JSON.parse(decodeURIComponent(parseStr))
        // 活动
        this.params.activityId = queryParams.activityId
        this.params.bid = queryParams.bid
        setLocalStorage('activityId', queryParams.activityId)
        setLocalStorage('sharebid', queryParams.bid)
      } else {
        this.params.activityId = getLocalStorage('activityId')
        this.params.bid = getLocalStorage('sharebid')
      }
      this.fetchData(true)
      // 倒计时
      // const t = parseInt((new Date('2018/9/22 23:59:59').getTime() - new Date().getTime()) / 1000)
      let end = ''
      if (this.params.activityId === this.preSaleId) {
        end = '2018/11/06 23:59:59'
      }
      if (end !== '') {
        const t = parseInt((new Date(end).getTime() - new Date().getTime()) / 1000)
        this.countDown(t)
      }
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .loadmoreText {
    /* background: #f0f3f5; */
    // display: flex;
    // -webkit-display: flex;
    // flex: 1;
    // justify-content: center;
    // align-items: center;
    @include flexbox(center,
    center,
    row,
    nowrap);
    font-size: 12px;
    background: transparent;
    padding: 10px 0;
    >span {
      padding-left: 10px;
    }
  }

  .product-container {
    // height: 100%;
    .content {
      /* 商品列表 */
      .recommend {
        font-size: 0px;
        height: auto;
        div {
          font-size: 0px;
        }
        .recommed-item {
          float: left;
        }
        .clear {
          clear: both;
          height: 0;
          line-height: 0;
          font-size: 0
        } // .two-item {
        //   width: 50%; // display: inline-block; 
        //   float: left;
        // }
        // .three-item {
        //   width: 33.33%; // display: inline-block; 
        //   float: left;
        // }
        img {
          display: block;
          width: 100%
        }
      }
      .tips {
        padding: 10px;
        background: #FFFEEB;
        color: #000;
        position: relative;
        .icon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background: url('~assets/common/images/laba.png') no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
        }
        p {
          line-height: 20px;
          padding-left: 25px;
          display: inline-block;
        }
      }
      .loadmore-warp {
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        .countdown {
          margin-left: -10px;
          background: #080404;
          color: #ffffff;
          font-size: 14px;
          display: flex;
          align-items: center;
          line-height: 40px;
          justify-content: center;
          .time {
            position: relative;
            font-size: 24px;
            color: #EE7700;
            font-weight: 600;
          }
        }
        .product-list {
          background: #fff;
          padding-right: 10px;
          @include flexbox(space-between,
          center,
          row,
          wrap);
          overflow: hidden;
          clear: both;
          .product-item {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            flex: 0 0 50%;
            -webkit-flex: 0 0 50%;
              width:50%;
            .item-posre {
              position: relative;
              text-align: center;
              img {
                max-height: 185px;
                max-width: 100%;
              } // &:after {
              //    display: block;
              //    position: absolute;
              //    content: '';
              //    width: 100%;
              //    height: 23px;
              //    bottom: 0;
              //    background-color: #333333;
              //    opacity: 0.5;
              // }
              // &:before {
              //    display: block;
              //    position: absolute;
              //    content: '失效';
              //    width: 100%;
              //    bottom: 0;
              //    z-index: 100;
              //    color:#ffffff;
              //    line-height: 23px;
              // }
            }
            .item-product-text {
              margin: .1rem 0 0 .1rem;
              font-size: 14px;
              line-height: 20px;
              height: 40px; // overflow: hidden;
              // display: -webkit-box;
              // -webkit-line-clamp: 2;
              // -webkit-box-orient: vertical; 
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-box-orient:vertical;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2; 
              @include textoverflow(2);
            }
            .size {
              white-space: normal;
              word-break: break-all;
              @include textoverflow(1);
            }
            .item-product-info {
              @include flexbox(space-between,
              center,
              row,
              wrap);
              color: #f23030;
              padding: 0 0 .2rem .1rem;
              font-size: 16px;
              span {
                i {
                  font-size: 12px;
                  margin-right: .1rem;
                }
              }
              .jx-btn {
                color: #ffffff;
                font-size: 13px;
                background: #f23030;
                border: 1px solid #f23030!important;
                padding: 0.1rem 0.2rem;
                @include radius(3px)
              }
              .none {
                background: #ddd;
                border: 1px solid #999!important;
              }
            }
            .original-price {
              i {
                text-decoration: line-through;
              }
              padding: .2rem .1rem .1rem .1rem;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .cart-tips {
          margin-top: 40px;
          position: relative;
          z-index: 1;
          padding: $padding 25px;
          @include flexbox(flex-start,
          center,
          column,
          nowrap);
          p {
            font-size: 14px;
            color: #999;
            line-height: 2;
          }
        }
      }

      /* 商品列表 */
    }
  }

</style>
